<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
    <style>
        #app {

            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div id="app">
        <table class="table table-bordered" style="max-width:600px;margin:0 auto 50px">
            <thead>
                <tr>
                    <th> 商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="text" v-model="xinzhen.name">
                    </td>
                    <td>
                        <input type="number" v-model="xinzhen.price">
                    </td>
                    <td>
                        <input type="number" v-model="xinzhen.num">
                    </td>
                    <td> <button @click="add" class="btn btn-danger btn-sm">增加</button></td>
                </tr>

            </tbody>
        </table>

        <table class="table table-bordered table-hover table-condensed" style="max-width:600px;margin:0 auto">
            <tr>
                <th>
                    商品名称
                </th>
                <th>
                    商品价格
                </th>
                <th>购买数量</th>
                <th>
                    小计
                </th>

                <th>
                    操作
                </th>
            </tr>
            <tr v-for="(item, index) in items">
                <td>
                    <input type="checkbox" @change="danclick" v-model="item.inputClick">
                    <span>{{item.name}}</span>
                </td>
                <td>
                    ￥{{item.price}}
                </td>
                <td>
                    <button @click="jiaclick(index)" class="btn btn-xs">+</button>
                    <span>{{item.num}}</span>
                    <button @click="jianclick(index)" class="btn btn-xs">-</button>
                </td>
                <td>
                    {{item.price*item.num}}
                </td>
                <td>
                    <button class="btn btn-danger btn-sm" @click="del(index)">删除</button>
                </td>
            </tr>
            <tr v-if="!items.length">
                <td colspan="5" align="center">
                    暂无商品
                </td>
            </tr>
            <tr>
                <td>合计:</td>
                <td colspan="4">
                    全选：
                    <input type="checkbox" @change="quanclick" v-model="allInputClick">
                    总价格：
                    ￥{{allprice}}
                </td>
            </tr>
        </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.13/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                allprice: 0,
                allInputClick: true,
                xinzhen: {
                    name: '',
                    num: 0,
                    price: 0,
                    inputClick: true
                
                }
                ,
                items: [
                    {
                        name: "商品1",
                        num: 1,
                        price: 13,
                        inputClick: true
                    },
                    {

                        name: "商品2",
                        num: 1,
                        price: 15,
                        inputClick: true
                    },
                    {

                        name: "商品3",
                        num: 1,
                        price: 17,
                        inputClick: true
                    },
                ]
            },
            methods: {
                add() {

                  console.log(this.xinzhen)
                    this.items.push({...this.xinzhen})
                       
                    this.zongjia()
                    console.log(this.items)
                },
                quanclick() {

                    this.items.forEach(elem => {
                        elem.inputClick = this.allInputClick
                    })
                    this.zongjia()

                }
                ,
                danclick() {
                    this.zongjia()
                    this.allInputClick = this.items.every(item => item.inputClick)
                },
                del(index) {
                    if (confirm("您确定删除吗？")) {
                        this.items.splice(index, 1)
                        this.zongjia()
                    }

                },
                jiaclick(index) {
                    this.items[index].num++
                    this.zongjia()
                },
                jianclick(index) {
                    this.items[index].num--
                    if (this.items[index].num <= 1) {
                        this.items[index].num = 1
                    }
                    this.zongjia()
                },

                zongjia() {
                    const allpri = this.items.filter(item => item.inputClick)
                    this.allprice = 0
                    allpri.forEach(elem => {
                        this.allprice += elem.num * elem.price
                    });
                }
            }

        })
        vm.zongjia()
        
    </script>

</body>

</html>